<template>
  <div>
    <div class="card">
      <h3>发布校园互助任务</h3>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="任务类型" prop="taskType">
          <el-select v-model="form.taskType" placeholder="请选择任务类型">
            <el-option label="快递代拿" value="express" />
            <el-option label="外卖代拿" value="takeout" />
            <el-option label="药品代购" value="medicine" />
            <el-option label="跑腿服务" value="errand" />
            <el-option label="其他服务" value="other" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="任务标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入任务标题" />
        </el-form-item>
        
        <el-form-item label="任务描述" prop="description">
          <el-input 
            v-model="form.description" 
            type="textarea" 
            :rows="4" 
            placeholder="请详细描述您的需求，如物品信息、取件地点、送达地点等" 
          />
        </el-form-item>
        
        <el-form-item label="联系方式" prop="contactInfo">
          <el-input v-model="form.contactInfo" placeholder="请输入您的联系方式" />
        </el-form-item>
        
        <el-form-item label="取件地点" prop="pickupLocation">
          <el-input v-model="form.pickupLocation" placeholder="请输入取件地点" />
        </el-form-item>
        
        <el-form-item label="送达地点" prop="deliveryLocation">
          <el-input v-model="form.deliveryLocation" placeholder="请输入送达地点" />
        </el-form-item>
        
        <el-form-item label="报酬(元)" prop="reward">
          <el-input-number v-model="form.reward" :min="1" :precision="2" :step="0.5" />
        </el-form-item>
        
        <el-form-item label="截止时间" prop="deadline">
          <el-date-picker
            v-model="form.deadline"
            type="datetime"
            placeholder="选择截止时间"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">发布任务</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/utils/request';

const formRef = ref();

const form = reactive({
  taskType: '',
  title: '',
  description: '',
  contactInfo: '',
  pickupLocation: '',
  deliveryLocation: '',
  reward: 5,
  deadline: ''
});

const rules = reactive({
  taskType: [
    { required: true, message: '请选择任务类型', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请输入任务标题', trigger: 'blur' },
    { min: 2, max: 50, message: '标题长度在2到50个字符之间', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入任务描述', trigger: 'blur' },
    { min: 10, max: 500, message: '描述长度在10到500个字符之间', trigger: 'blur' }
  ],
  contactInfo: [
    { required: true,  min: 11, max: 11,message: '联系方式错误', trigger: 'blur' }
  ],
  pickupLocation: [
    { required: true, message: '请输入取件地点', trigger: 'blur' }
  ],
  deliveryLocation: [
    { required: true, message: '请输入送达地点', trigger: 'blur' }
  ],
  reward: [
    { required: true, message: '请设置报酬', trigger: 'blur' }
  ],
  deadline: [
    {  message: '请选择截止时间', trigger: 'change' }
  ]
});

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 从localStorage获取用户信息
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
      
      // 设置发布者信息
      form.publisher = userInfo.name || '';
      form.publisherId = userInfo.id || null;
      
      // 发送请求
      request.post('/task/publish', form).then(res => {
        if (res.code === '200') {
          ElMessage.success('任务发布成功！');
          resetForm();
        } else {
          ElMessage.error(res.msg || '发布失败，请稍后重试');
        }
      }).catch(err => {
        console.error('发布任务失败:', err);
        ElMessage.error('发布失败，请稍后重试');
      });
    }
  });
};

const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<style scoped>

h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #303133;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>